@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply tw-text-3xl tw-font-bold tw-m-8;
  }
  h2 {
    @apply tw-text-2xl tw-font-bold tw-m-6;
  }
  h3 {
    @apply tw-text-xl tw-font-bold tw-m-4;
  }
  ol {
    @apply tw-list-decimal tw-list-outside;
  }
  ul {
    @apply tw-list-disc tw-list-outside;
  }
  .tw-scrollbar-thin {
    scrollbar-width: thin;
  }

  .tw-align-image {
    vertical-align: -0.125em;
  }

  :root {
    /* ========== Global ========== */
    /* Color of the background */
    --global-background-color: #fff;
    /* Color of the text */
    --global-font-color: #161209;
    /* Color of the secondary text */
    --global-font-secondary-color: #4d4d4d;
    /* Color of the link */
    --global-link-color: #161209;
    /* Color of the hover link */
    --global-link-hover-color: #2d809a;
    /* Color of the border */
    --global-border-color: #f0f0f0;
    /* ========== Global ========== */

    /* ========== Selection ========== */
    /* Color of the selected text */
    --selection-color: #35a6f740;
    /* ========== Selection ========== */

    /* ========== Header ========== */
    /* Color of the header background */
    --header-background-color: #f8f8f8;
    /* Color of the hover header item */
    --header-hover-color: #161209;
    --header-delimiter: unset;
    /* Color of the search background */
    --search-background-color: #e9e9e9;
    --search-empty-font-color: unset;
    /* ========== Header ========== */

    /* ========== Single Content ========== */
    /* Font weight of the single H2 - H6 */
    --single-h-font-weight: bold;
    /* Color of the single content strong/b */
    --single-content-strong-color: unset;
    /* Color of the single link */
    --single-link-color: #2d809a;
    /* Color of the hover single link */
    --single-link-hover-color: #ef3982;
    /* Color of the table background */
    --table-background-color: #fff;
    /* Color of the table thead */
    --table-thead-color: #ededed;
    --table-border-color: var(--borderColor-default);
    /* Color of the blockquote */
    --blockquote-color: #6bd6fd;
    --blockquote-bg-color: rgba(107, 214, 253, 0.2);
    /* ========== Single Content ========== */

    /* ========== Pagination ========== */
    /* Color of the link in pagination */
    --pagination-link-color: #2d809a;
    /* Color of the hover link in pagination */
    --pagination-link-hover-color: #000;
    /* ========== Pagination ========== */

    /* ========== Friend Link ========== */
    /* Color of friend link background */
    --friend-link-background-color: #f8f8f8;
    /* Color of friend link text */
    --friend-link-color: #2d809a;
    /* Color of hover friend link text */
    --friend-link-hover-color: #ef3982;
    /* ========== Friend Link ========== */

    /* ========== Sponsor Button ========== */
    /* Sponsor button background color */
    --sponsor-button-background-color: #f0f0f0;
    /* Sponsor button background color while in the :hover state */
    --sponsor-button-hover-background-color: #f0f0f0;
    /* ========== Sponsor Button ========== */

    /* ========== Code ========== */
    /* Color of the code */
    --code-color: #e74c3c;
    /* Color of the code background */
    --code-background-color: #f5f5f5;
    --inline-code-background-color: var(--bgColor-neutral-muted);

    --code-header-color: #ededed;
    --code-background-color-darken-5: #e8e8e8;
    --code-background-color-darken-6: #e6e6e6;
    --code-background-color-code-header: var(--code-background-color-darken-6);
    --code-background-color-code-hl: gainsboro;
    --code-info-color: #9c9c9c;
    /* ========== Code ========== */

    /* ========== Cookie Consent ========== */
    --cookie-background-color: #ccc;
    /* ========== Cookie Consent ========== */
    /* ========== related ========== */
    --related-background-color: #f8f8f8;
    --related-color: black;
    --related-hover-color: #ef3982;
    /* ========== related ========== */

    /* ========== showcase ========== */
    --showcase-background-color: #f8f8f8;
    --showcase-color: black;
    --showcase-hover-color: #ef3982;
    /* ========== showcase ========== */

    /* ========== primitives ========== */
    --fgColor-default: #161209;
    --fgColor-secondary: #4d4d4d;
    --fgColor-muted: unset;
    --fgColor-link: #2d809a;
    --fgColor-link-hover: #ef3982;
    --bgColor-default: #fff;
    --bgColor-secondary: #ededed;
    --bgColor-accent-emphasis: #6bd6fd;
    --bgColor-accent-muted: #388bfd1a;
    --bgColor-neutral-muted: #afb8c133;
    --borderColor-default: #f0f0f0;
    --selection-bgColor: #35a6f740;
    --button-default-bgColor-rest: #f0f0f0;
    --button-default-bgColor-hover: #f0f0f0;
    /* ========== primitives ========== */
  }
  /* Theme dark */
  html.dark {
    /* ========== primitives ========== */
    --fgColor-default: #e6edf3;
    --fgColor-secondary: #d4dbe1;
    --fgColor-muted: #848d97;
    --fgColor-link: #4493f8;
    --fgColor-link-hover: #61adff;
    --bgColor-default: #0d1117;
    --bgColor-secondary: #161b22;
    --bgColor-accent-emphasis: #1f6feb;
    --bgColor-accent-muted: #388bfd1a;
    --borderColor-default: #30363d;
    --bgColor-neutral-muted: #6e768166;
    --selection-bgColor: #1f6febb3;
    --button-default-bgColor-rest: #21262d;
    --button-default-bgColor-hover: #292e36;
    /* ========== primitives ========== */

    --global-background-color: var(--bgColor-default);
    --global-font-color: var(--fgColor-default);
    --global-font-secondary-color: var(--fgColor-secondary);
    --global-link-color: var(--fgColor-default);
    --global-link-hover-color: #ffffff;
    --global-border-color: var(--borderColor-default);
    --selection-color: var(--selection-bgColor);

    --header-background-color: var(--bgColor-secondary);
    --header-hover-color: #ffffff;
    --header-delimiter: var(--fgColor-muted);

    --search-background-color: var(--bgColor-default);
    --search-empty-font-color: var(--fgColor-secondary);

    --single-h-font-weight: bolder;
    --single-content-strong-color: var(--fgColor-default);
    --single-link-color: var(--fgColor-link);
    --single-link-hover-color: var(--fgColor-link-hover);

    --table-background-color: var(--bgColor-default);
    --table-thead-color: var(--bgColor-secondary);
    --table-border-color: var(--borderColor-default);

    --blockquote-color: var(--bgColor-accent-emphasis);
    --blockquote-bg-color: var(--bgColor-accent-muted);

    --pagination-link-color: var(--fgColor-default);
    --pagination-link-hover-color: white;

    --friend-link-background-color: var(--bgColor-secondary);
    --friend-link-color: var(--fgColor-link);
    --friend-link-hover-color: var(--fgColor-link-hover);

    --sponsor-button-background-color: var(--button-default-bgColor-rest);
    --sponsor-button-hover-background-color: var(
      --button-default-bgColor-hover
    );

    --cookie-background-color: white;

    --code-color: #e5bf78;
    --code-background-color: #1b2029;
    --code-header-color: var(--bgColor-secondary);
    --code-background-color-darken-5: #1c2025; /* TODO */
    --code-background-color-darken-6: #1a1d23; /* TODO */
    --code-background-color-code-header: var(
      --code-background-color-darken-6
    ); /* TODO */
    --code-background-color-code-hl: #1c2025; /* TODO */
    --code-info-color: #b1b0b0; /* TODO */

    --related-background-color: var(--bgColor-secondary);
    --related-color: var(--fgColor-default);
    --related-hover-color: white;

    --showcase-background-color: var(--bgColor-secondary);
    --showcase-color: var(--fgColor-default);
    --showcase-hover-color: white;
  }
}
